<template>
  <div>
    <myDivider name="审批信息"></myDivider>
    <el-page-header @back="$router.back(-1)" style="margin-bottom: 20px;">
    </el-page-header>
    <!-- 审批信息 -->
    <div class="spxxBox">
      <div class="top">
        <span>审批信息</span>
      </div>
      <div class="F1">
        <div>审批类型</div>
        <div>标题</div>
        <div>发文单位</div>
        <div>提审部门</div>
        <div>提审人</div>
      </div>
      <div class="F2">
        <div>公告审批</div>
        <div>{{ res.title }}</div>
        <div>{{ res.unitName }}</div>
        <div>{{ res.departmentName }}</div>
        <div>{{ res.userName }}</div>
      </div>
      <div class="F3">
        <div>推送范围</div>
        <div>推送对象</div>
        <div>推送方式</div>
        <div>推送时间</div>
        <div>主题图</div>
      </div>
      <div class="F4">
        <div>{{ res.pushRange == 1 ? '小区' : res.pushRange == 2 ? '机关' : '机构' }}</div>
        <div style="color: #40b8ff;cursor: pointer;" @click="lookPushUser">点击查看</div>
        <div>{{ res.pushCategory == 1 ? '立即推送' : '定时推送' }}</div>
        <div>{{ res.regularTimeStr ? res.regularTimeStr : '--' }}</div>
        <div>
          <el-image v-if="res.image" style="width: 60%; height: 60%" :src="res.image" :preview-src-list="srcList">
          </el-image>
        </div>
      </div>
    </div>
    <!-- 推送内容概览 -->
    <div class="tsnrglBox">
      <div class="top">
        <span>推送内容概览</span>
      </div>
      <div class="main">
        <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="bottom">
          <el-tab-pane label="网页端展示" name="网页端展示">
            <div class="PcStyle">
            </div>
          </el-tab-pane>
          <el-tab-pane label="手机端展示" name="手机端展示">
            <div class="AppStyle">
              <div class="box">
                <div class="top">
                  <div></div>
                  <div></div>
                </div>
                <div class="mainTop">
                  <span>公告详情</span>
                </div>
                <div style="position: relative;overflow: scroll;width: 100%;height: 100vh">
                  <div class="App_main" style="position:absolute;left:0;top: 0;width: 100%;">

                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 审批历史 -->
    <div class="splsBox">
      <div class="top">
        <span>审批历史</span>
      </div>
      <div class="stepsBox">
        <el-steps direction="vertical" finish-status="success">
          <el-step v-for="item, i in res.historyList" :key="i">
            <div slot="icon">
              <div style="width: 10px;height: 10px;border: 5px solid;
              border-radius: 1000px;"
                :style="{ borderColor: i == 0 ? '#6db5ff' : statusList[item.status] == '审批中' ? '#e09f00' : statusList[item.status] == '审批通过' ? '#68d24c' : '#d81212' }">

              </div>
            </div>
            <div slot="description" class="stepsEl">
              <div class="stepsBox_top">
                <div>
                  <span>{{ i == 0 ? '提审人：' : '审批人：' }}</span>
                  <span>{{ i == 0 ? item.applicantName : item.approverName }}</span>
                </div>
                <div>
                  <span>{{ i == 0 ? '提审时间：' : '审批时间：' }}</span>
                  <span>{{ i == 0 ? item.applyTime : item.createTime }}</span>
                </div>
              </div>
              <div v-if="i != 0" class="spsm">
                <span>{{ i == 0 ? '提审说明：' : '审批说明：' }}</span>
                <span>{{ item.description }}</span>
              </div>
              <div class="status">
                <div
                  :style="{ color: i == 0 ? '#6db5ff' : statusList[item.status] == '审批中' ? '#e09f00' : statusList[item.status] == '审批通过' ? '#68d24c' : '#d81212' }">
                  {{ i == 0 ? '发起审批' : statusList[item.status] }}
                </div>
              </div>
            </div>
          </el-step>
        </el-steps>
      </div>
    </div>
    <!-- 审批建议 -->
    <div class="spjyBox" v-if="spjyShow">
      <div class="top">
        <span>审批建议</span>
      </div>
      <div class="spjyBox_main">

        <div style="margin-top: 20px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="" label-width="0">
              <div>
                <el-radio v-model="ruleForm.status" label="2">审批通过</el-radio>
                <el-radio v-model="ruleForm.status" label="3">审批驳回</el-radio>
              </div>
            </el-form-item>
            <el-form-item label="说明：" prop="description">
              <el-input v-model="ruleForm.description" type="textarea" :rows="2" maxlength="200"
                placeholder="请输入内容，200字以内"></el-input>
            </el-form-item>
            <el-form-item style="padding: 0;margin: 0;">
              <div style="width: 100%;display: flex;justify-content: flex-end;">
                <el-button type="primary" size="small" @click="submit">提交</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 推送对象弹窗 -->
    <el-dialog title="推送对象" :visible.sync="dialogVisible" width="1000px">
      <div class="tableBox">
        <el-table :data="tableData" style="width: 1000px" border>
          <el-table-column align="center" prop="name" label="姓名" width="150">
          </el-table-column>
          <el-table-column align="center" prop="account" label="账号" width="150">
          </el-table-column>
          <el-table-column align="center" prop="gender" :label="'性别'" width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.gender == '1' ? '男' : '女' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="age" :label="'年龄'" width="50">
          </el-table-column>
          <!-- <el-table-column align="center" prop="homeAddress" label="住址" width="">
          </el-table-column> -->

          <el-table-column v-if="pushRange == 1" align="center" prop="homeAddress" label="住址" width="">
          </el-table-column>
          <el-table-column v-if="pushRange != 1" align="center" prop="unitName" label="单位名称" width="">
          </el-table-column>
          <el-table-column v-if="pushRange != 1" align="center" prop="departmentName" label="部门" width="100">
          </el-table-column>
          <el-table-column v-if="pushRange != 1" align="center" prop="postName" label="岗位" width="100">
          </el-table-column>

        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- 分页器 -->
        <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
        </myPagination>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      pushRange: null,
      res: {},
      srcList: ['https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
      activeName: '手机端展示',
      ruleForm: {},
      rules: {
        description: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
      },
      dialogVisible: false,
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
      tableData: [
        { dd1: '1', dd2: '1', dd3: '1', dd4: '1', dd5: '1', },

      ],
      currentId: null,//当前审批id
      spjyShow: null,
      statusList: ['', '审批中', '审批通过', '审批驳回', '已失效']
    }
  },
  async activated() {
    this.$set(this.ruleForm, 'status', '2')
    this.$set(this.ruleForm, 'description', '')
    this.currentId = this.$route.query.id
    this.spjyShow = this.$route.query.name == '审批' ? true : false //审批历史显隐
    this.getDetail()
  },
  deactivated() {

  },
  methods: {

    async getDetail() {
      let res = await this.$api.message.MyapprovalDetail(this.currentId)
      if (res.code != 200) {
        this.$message.error(res.message)
        return
      }
      this.res = res.data
      this.pushRange = res.data.pushRange
      this.res.historyList = [this.res.historyList[0], ...this.res.historyList]
      this.$nextTick(() => {
        function isValidJSON(str) { //判断是否是json格式
          try {
            JSON.parse(str);
            return true;
          } catch (e) {
            return false;
          }
        }

        if (!isValidJSON(res.data.pushDescription)) {
          let NB1 = document.querySelector('.App_main')
          NB1.innerHTML = res.data.pushDescription
          let NB2 = document.querySelector('.PcStyle')
          NB2.innerHTML = res.data.pushDescription
        } else {
          let NB1 = document.querySelector('.App_main')
          NB1.innerHTML = JSON.parse(res.data.pushDescription)
          let NB2 = document.querySelector('.PcStyle')
          NB2.innerHTML = JSON.parse(res.data.pushDescription)
        }
      })
      this.srcList = []
      this.srcList.push(this.res.image)
      console.log(this.res, '详情数据');
    },
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {
      this.pageNum = e
      this.getTableList()
    },
    handleClick() {

    },
    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          console.log(this.currentId, this.ruleForm, 'ruleForm');
          let params = {
            "id": this.currentId, //节点id
            "status": this.ruleForm.status, //审核状态 2:通过 3:驳回
            "description": this.ruleForm.description //审批说明
          }
          let res = await this.$api.message.Myapproval(params)
          console.log(res, 'qwdqwd');
          if (res.code == 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.$router.push('/webNotice/NoticeShenPiList')
          } else {
            this.$message.error(res.message);
          }
        } else {

        }
      });
    },
    async getTableList() {
      let res = await this.$api.message.MygetPushObjectsList({
        "id": this.$route.query.id * 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
      this.tableData = res.data.list
      this.total = res.data.total
    },
    lookPushUser() { //点击推送对象
      this.getTableList()
      this.dialogVisible = true
    }
  },
}
</script>

<style lang="less" scoped>
.spxxBox {
  width: 1000px;
  height: 240px;
  border: 1px solid #f2f4f8;

  .top {
    width: 100%;
    height: 40px;
    background-color: #fafafa;
    box-sizing: border-box;
    line-height: 40px;
    font-size: 13px;
    font-weight: 600;
    padding-left: 15px;
  }

  .F1 {
    width: 100%;
    height: 50px;
    background-color: #dbdbdb;
    box-sizing: border-box;
    line-height: 50px;
    display: flex;

    div {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid white;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .F2 {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    box-sizing: border-box;
    line-height: 50px;
    display: flex;

    div {
      width: 20%;
      height: 100%;
     text-align: center;
      box-sizing: border-box;
      border: 1px solid white;
      font-size: 14px;
      overflow: hidden;
      -webkit-line-clamp: 1;
      padding: 0 20px;
      box-sizing: border-box;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
  }

  .F3 {
    width: 100%;
    height: 50px;
    background-color: #dbdbdb;
    box-sizing: border-box;
    line-height: 50px;
    display: flex;

    div {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid white;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .F4 {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    box-sizing: border-box;
    line-height: 50px;
    display: flex;

    div {
      width: 20%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid white;
      font-size: 14px;
    }
  }

}

.tsnrglBox {
  margin-top: 20px;
  width: 1000px;
  border: 1px solid #f2f4f8;

  .top {
    width: 100%;
    height: 40px;
    font-size: 13px;
    font-weight: 600;
    background-color: #fafafa;
    box-sizing: border-box;
    line-height: 40px;
    padding-left: 15px;
  }

  .main {
    /deep/ .el-tabs__nav-wrap {
      .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;

      }

      &::after {
        display: none;
      }
    }
  }
}

.PcStyle {
  min-height: 500px;
}

.AppStyle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .box {
    width: 340px;
    height: 620px;
    background-color: white;
    border-radius: 50px;
    border: 10px solid black;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .top {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      position: relative;

      div {
        &:nth-child(1) {
          border-radius: 10000px;
          width: 15px;
          height: 15px;
          background-color: black;
        }

        &:nth-child(2) {
          position: absolute;
          right: 50%;
          transform: translateX(50%);
          border-radius: 10000px;
          width: 150px;
          height: 15px;
          background-color: black;
        }
      }
    }

    .mainTop {
      width: 100%;
      height: 40px;
      background-color: #de3425;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      color: white;
      font-size: 14px;
    }

    .App_main {
      // overflow-y: scroll;
      // flex: 1;
      // width: 320px;

      // &::-webkit-scrollbar {
      //   display: none;
      // }
    }

    // .footer {
    //   width: 100%;
    //   height: 30px;

    //   position: relative;

    //   div {
    //     position: absolute;
    //     top: 50%;
    //     left: 50%;
    //     transform: translate(-50%, -50%);
    //     border-radius: 10000px;
    //     width: 180px;
    //     height: 10px;
    //     background-color: black;

    //   }
    // }
  }
}

.splsBox {
  margin-top: 20px;
  width: 1000px;
  border: 1px solid #f2f4f8;

  .top {
    width: 100%;
    height: 40px;
    font-size: 13px;
    font-weight: 600;
    background-color: #fafafa;
    box-sizing: border-box;
    line-height: 40px;
    padding-left: 15px;
  }

  .stepsBox {
    width: 100%;
    // height: 300px;
    padding: 20px;
    box-sizing: border-box;

    /deep/ .el-step__icon {
      border-width: 0;
    }

    /deep/.el-step__head.is-success {
      color: #73b8ff;
      border-color: #73b8ff;

      .el-step__icon {
        border-width: 5px;

        .el-step__icon-inner {
          display: none;
        }
      }
    }

    /deep/.el-step__head.is-process {
      color: #a6e22e;
      border-color: #a6e22e;

      .el-step__icon {
        border-width: 5px;

        .el-step__icon-inner {
          display: none;
        }
      }
    }

    /deep/ .el-step__description.is-wait {
      color: black;

    }

    .stepsEl {
      width: 900px;
      height: 70px;
      border: 1px solid #f4f4f4;
      padding: 0 20px;
      box-sizing: border-box;
      position: relative;

      .stepsBox_top {
        height: 50%;
        display: flex;
        line-height: 35px;

        div {
          &:nth-child(2) {
            margin-left: 50px;
          }
        }
      }



      .status {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        border-radius: 10000px;
        border: 1px solid #aaa;
        display: flex;
        justify-content: center;
        align-items: center;
        // cursor: pointer;
      }
    }
  }

}

.spjyBox {
  margin-top: 20px;
  width: 1000px;
  border: 1px solid #f2f4f8;

  .top {
    width: 100%;
    height: 40px;
    font-size: 13px;
    font-weight: 600;
    background-color: #fafafa;
    box-sizing: border-box;
    line-height: 40px;
    padding-left: 15px;
  }

  .spjyBox_main {
    padding: 20px;
    box-sizing: border-box;
  }

}

.tableBox {

  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #ebecf0;
      }
    }
  }

}
</style>